<!--
 * @Author       : 震雨 LuckRain7
 * @Date         : 2020-09-23 11:32:17
 * @LastEditTime: 2021-04-17 14:47:25
 * @Description  : 首页 组件
 * @ 0 Error 0 Warning 0 Bug | Love and Peace

 TODO 参与任务 | 进行中的任务 | 待审批任务(审批中任务) | 工时统计 | 今日到期任务 | 按时完成任务
 | 任务分布情况（进行中、已逾期、审批中、按时完成、预期完成）
-->

<template>
  <page-layout
    :avatar="currUser.avatar ? currUser.avatar : '/default-avater.jpg'"
  >
    <!-- 人员基本信息  卡片 -->
    <div slot="headerContent">
      <div >
        欢迎 {{ currUser.username }}
        {{ currPost.name ? currPost.name : "实习生" }}回来，开始工作吧！
      </div>
      <div>
        <!-- 职务 部门信息 -->
        <p class="two">
          {{ currPost.name ? currPost.name : "实习生" }} |
          <span v-for="(dep, depIndex) in getDepsInfo" :key="depIndex">
            {{ dep.departName }}
            <span v-if="depIndex != getDepsInfo.length - 1">、</span>
          </span>
        </p>
      </div>
    </div>

    <template>
      <a-row style="margin: 0 -12px">
        <a-col
          style="padding: 0 12px"
          :xl="16"
          :lg="24"
          :md="24"
          :sm="24"
          :xs="24"
        >
          <!-- 
            待办事项  动态
            -->
          <a-card title="待办事项" :bordered="false">
            <a-list :locale="{ emptyText: '您真的是太勤劳了！暂无待办' }">
              <a-list-item
                :key="index"
                v-for="(item, index) in upcomingTasksList"
              >
                <a-list-item-meta>
                  <a-avatar slot="avatar" style="background-color: #4091f7">
                    {{ item.PNAME_ | upcomingTaskFilter_PNAME_ }}
                  </a-avatar>
                  <!-- 文字 -->
                  <p slot="title">
                    <span slot="description">{{ item.CREATE_TIME_ }}</span>
                    <span style="margin-left: 10px">{{ item.INITATOR }}</span>
                    <span>向您发起了</span>
                    <router-link
                      :to="
                        item.PNAME_
                          | upcomingTaskFilter_PNAME_
                          | upcomingTaskLinkFilter
                      "
                    >
                      {{ item.PNAME_ | upcomingTaskFilter_PNAME_ }}
                    </router-link>
                    <span>申请</span>
                  </p>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
          <!-- 
  
          -->
          <div style="height: 24px"></div>
          <!-- 

          -->
          <!-- <a-card title="生产预警" :bordered="false"> -->
          <!-- <a
              slot="extra"
              @click="
                () => {
                  $router.push('/ShedTurnoverWarning');
                }
              "
              >大棚周转预警 |</a
            >

            <a
              slot="extra"
              @click="
                () => {
                  $router.push('/OutputWarning');
                }
              "
            >
              产量预警</a
            > -->
          <!-- <a-list>
              <a-list-item
                :key="index"
                v-for="(item, index) in EarlyWarningList"
              >
                <a-list-item-meta :description="item.description">
                  <a slot="title" href="https://www.antdv.com/">{{
                    item.title
                  }}</a>
                  <a-avatar
                    slot="avatar"
                    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  />
                </a-list-item-meta>
              </a-list-item>
            </a-list> -->
          <!-- </a-card> -->
        </a-col>
        <a-col
          style="padding: 0 12px"
          :xl="8"
          :lg="24"
          :md="24"
          :sm="24"
          :xs="24"
        >
          <a-card
            title="快速开始/便捷导航"
            style="margin-bottom: 24px"
            :bordered="false"
            :body-style="{ padding: 0 }"
          >
            <div class="item-group">
              <a @click="routerJump('/ProcurementInput')">采购入库</a>
              <a @click="routerJump('/ProductInput')">产成品入库</a>
              <a @click="routerJump('/SaleOutput')">销售出库</a>
              <a @click="routerJump('/ProductionMaterialsOutput')"
                >生产材料出库</a
              >
              <a @click="routerJump('/InfrastructureOutput')">基建出库</a>

              <a @click="routerJump('/OtherOutput')">其他出库</a>
            </div>
          </a-card>
          <!-- 

          -->
          <a-card style="margin-bottom: 24px">
            <div
              class="take-part-task-num todo"
              style="margin-bottom: 24px; text-align: center"
            >
              {{ toDoTasksNum }}
            </div>
            <div class="take-part-task-title" style="text-align: center">
              待审批任务
            </div>
          </a-card>
          <!-- 
            
          -->
          <a-card style="margin-bottom: 24px">
            <div
              class="take-part-task-num completed"
              style="margin-bottom: 24px; text-align: center"
            >
              {{ completedTasksNum }}
            </div>
            <div class="take-part-task-title" style="text-align: center">
              已完成任务
            </div>
          </a-card>
        </a-col>
      </a-row>
    </template>
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import { mapState, mapGetters } from "vuex";

// import { CommonAjax } from "@/services/modules/Common.js";
// const commonAjax = new CommonAjax();

import { workflowHttp } from "@/services/modules/workFlow.js";
const wfHttp = new workflowHttp();

import { upcomingTaskFilter_PNAME_, upcomingTaskLinkFilter } from "./filter.js";

window.οnlοad = function() {
  if (location.home.indexOf("?xyz=") < 0) {
    location.home = location.home + "?xyz=" + Math.random();
  }
};

export default {
  name: "WorkPlace",
  components: { PageLayout },

  data() {
    return {
      loading: true,
      teams: [],
      upcomingTasksList: [], // 工作流代办数组
      announcementListData: [],
      completedTasksNum: 0, // 已办任务数量
      toDoTasksNum: 0, // 待办任务
      historyTasksNum: 0, // 历史任务
      filtersProcessList: ["备货流程", "生产领料", "基建流程", "其他出库流程"], // 流程过滤列表
    };
  },

  filters: {
    upcomingTaskFilter_PNAME_, // 流程名称 过滤器
    upcomingTaskLinkFilter, // 对应流程跳转地址 过滤器
  },

  computed: {
    // this.$store.state.user.info
    ...mapState("user", { currUser: "info", currPost: "position" }),
    ...mapGetters({
      getDepsInfo: "user/getDepsInfo",
    }),
  },

  mounted() {
    this.getUpcomingTasksList();
    this.getAllInfoList();
  },

  methods: {
    // 路由跳转
    routerJump(route) {
      this.isInMenuRights(route, this.MenuRights);
      if (this.tag) {
        this.$router.push({
          path: route,
        });
      } else {
        this.$message.error("没有权限跳转");
      }
    },

    // 判断路由路径是否在菜单中
    isInMenuRights(route, Tree) {
      Tree.forEach((item) => {
        console.log("路径和菜单树", item.path);
        if (item.path == route) {
          this.tag = true;
          return true;
        }

        if (item.children && item.children.length != 0) {
          this.isInMenuRights(route, item.children);
        }
      });
    },

    // 获取路由信息
    getAllInfoList() {
      // console.log("用户信息::::");
      this.MenuRights = this.$store.state.user.MenuRights;
    },

    // --- 获取工作流列表信息 ---
    getUpcomingTasksList() {
      // 获取正在待办的任务
      let queryPath = "";
      wfHttp.postUpcomingTasksList(queryPath).then((res) => {
        // console.log("获取的待办任务列表:::::::", res);

        const result = res;
        if (!result.success) {
          this.$message.error(result.message);
          return;
        }
        for (let i = 0; i < res.result.varList.length; i++) {
          if (
            this.filtersProcessList.indexOf(res.result.varList[i].PNAME_) > -1
          ) {
            this.upcomingTasksList.push(res.result.varList[i]);
            // console.log("this.upcomingTasksList", this.upcomingTasksList);
            this.toDoTasksNum = this.toDoTasksNum + 1;
          }
        }
      });
      // 获取已办任务
      wfHttp.postFinishTaskList(queryPath).then((res) => {
        // console.log(" --- posthistoryTasksList res --- ", res);
        // console.log(" --- 已办任务数量 --- ", res.result.varList.length);
        for (let i = 0; i < res.result.varList.length; i++) {
          if (
            this.filtersProcessList.indexOf(res.result.varList[i].PNAME_) > -1
          ) {
            this.completedTasksNum = this.toDoTasksNum + 1;
          }
        }
      });
    },
  },
};
</script>

<style lang="less">
@import "index";
.echart5 {
  width: 80%;
  height: 450px;
}
.take-part-task-num {
  font-size: 35px;
  &.todo {
    color: #d488d6;
  }
  &.completed {
    color: #65b4f1;
  }
  &.history {
    color: #70b37e;
  }
}
</style>
